<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="ZUI，一个简单灵活的前端框架。">
    <meta name="author" content="Zentao">
    <title>ZUI - 步骤查看器例子</title>
    <link href="../../dist/css/zui.css" rel="stylesheet">
    <style>
    [data-guide-viewer]{display: none}
    .modal-lightbox .modal-dialog {min-width: 300px; min-height: 105px}
    </style>
</head>

<body style="padding: 20px">
    <div class="conatiner" id="guideViewerExample">
        <h1>步骤查看器示例（guideViewer）</h1>
        <h2>固定高度：固定为指定的值（示例中为 500px）</h2>
        <img data-guide-viewer="2" data-height="500" src="../img/img1.jpg" alt="第一步：这是第一步图片的说明">
        <img data-guide-viewer="2" src="../img/img2.jpg" alt="第二步：这是第二步图片的说明">
        <img data-guide-viewer="2" src="../img/chanzhi_icon.png" alt="第三步：这是第三步图片的说明">
        <img data-guide-viewer="2" src="../img/slide1.jpg" alt="第四步：这是第四步图片的说明">
        <img data-guide-viewer="2" src="../img/img3.jpg" alt="第五步：这是第五步图片的说明">
        <div data-guide-viewer="2" title="自定义内容测试">
            <div class="container">
                <h1>哈哈哈</h1>
                <p>自定义内容测试:)</p>
            </div>
        </div>

        <h2>动态高度：根据图片或内容自动应用高度</h2>
        <img data-guide-viewer="1" data-lightbox="true" src="../img/img1.jpg" alt="第一步：这是第一步图片的说明">
        <img data-guide-viewer="1" src="../img/img2.jpg" alt="第二步：这是第二步图片的说明">
        <img data-guide-viewer="1" src="../img/slide1.jpg" alt="第四步：这是第四步图片的说明">
        <img data-guide-viewer="1" src="../img/img3.jpg" alt="第五步：这是第五步图片的说明">
        <div data-guide-viewer="1" title="自定义内容测试">
            <div class="container">
                <h1>哈哈哈</h1>
                <p>自定义内容测试:)</p>
            </div>
        </div>

        <h2>导航在上面</h2>
        <img data-guide-viewer="3" data-nav-pos="top" data-height="400" src="../img/img1.jpg" alt="第一步：这是第一步图片的说明">
        <img data-guide-viewer="3" src="../img/img2.jpg" alt="第二步：这是第二步图片的说明">
        <img data-guide-viewer="3" src="../img/chanzhi_icon.png" alt="第三步：这是第三步图片的说明">
        <img data-guide-viewer="3" src="../img/slide1.jpg" alt="第四步：这是第四步图片的说明">
        <img data-guide-viewer="3" src="../img/img3.jpg" alt="第五步：这是第五步图片的说明">
        <div data-guide-viewer="3" title="自定义内容测试">
            <div class="container">
                <h1>哈哈哈</h1>
                <p>自定义内容测试:)</p>
            </div>
        </div>

        <h2>选项</h2>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>选项</th>
                    <th>说明</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>height</td>
                    <td>高度，默认为 'auto'，可以指定一个数字设置固定高度</td>
                </tr>
                <tr>
                    <td>navPos</td>
                    <td>导航位置，默认 'bottom'（显示在下方），还可以设置为 'top' 将导航设置在上方</td>
                </tr>
                <tr>
                    <td>lightbox</td>
                    <td>是否启用图片灯箱浏览功能，默认为 'false'，如果设置为 `true`，需要图片浏览插件（$.fn.lightbox）已启用</td>
                </tr>
                <tr>
                    <td>lang</td>
                    <td>界面显示语言，默认自动设置</td>
                </tr>
                <tr>
                    <td>prevStep</td>
                    <td>在导航上显示的文本：“上一步”</td>
                </tr>
                <tr>
                    <td>nextStep</td>
                    <td>在导航上显示的文本：“下一步”</td>
                </tr>
                <tr>
                    <td>prevStepIcon</td>
                    <td>在导航上显示的图标：“icon-chevron-left”</td>
                </tr>
                <tr>
                    <td>nextStepIcon</td>
                    <td>在导航上显示的图标：“icon-chevron-right”</td>
                </tr>
                <tr>
                    <td>carousel</td>
                    <td>设置轮播选项，例如启用自动播放等</td>
                </tr>
                <tr>
                    <td>slide</td>
                    <td>是否启用动画效果，默认为 false</td>
                </tr>
            </tbody>
        </table>

        <h2>使用方法</h2>
        <pre><code>&lt;img data-guide-viewer=&quot;2&quot; data-height=&quot;500&quot; src=&quot;../img/img1.jpg&quot; alt=&quot;第一步：这是第一步图片的说明&quot;&gt;
&lt;img data-guide-viewer=&quot;2&quot; src=&quot;../img/img2.jpg&quot; alt=&quot;第二步：这是第二步图片的说明&quot;&gt;
&lt;img data-guide-viewer=&quot;2&quot; src=&quot;../img/chanzhi_icon.png&quot; alt=&quot;第三步：这是第三步图片的说明&quot;&gt;
&lt;img data-guide-viewer=&quot;2&quot; src=&quot;../img/slide1.jpg&quot; alt=&quot;第四步：这是第四步图片的说明&quot;&gt;
&lt;img data-guide-viewer=&quot;2&quot; src=&quot;../img/img3.jpg&quot; alt=&quot;第五步：这是第五步图片的说明&quot;&gt;
&lt;div data-guide-viewer=&quot;2&quot; title=&quot;自定义内容测试&quot;&gt;
    &lt;div class=&quot;container&quot;&gt;
        &lt;h1&gt;哈哈哈&lt;/h1&gt;
        &lt;p&gt;自定义内容测试:)&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
        <p>为属于同一组的步骤元素设置属性 “data-guide-viewer=*”，并且属性的值一致。</p>
        <p>在第一个步骤元素上使用 "data-*" 来设置选项。</p>
    </div>

    <script src="../../assets/jquery.js"></script>
    <script src="../../dist/js/zui.js"></script>
    <script src="../../dist/lib/guideViewer/zui.guideViewer.js"></script>
</body>

</html>